<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>星星评分</title>
    <link rel="stylesheet" type="text/css" href="css1.css" />
    <script>
        window.addEventListener('load', function() {
            // 1.获取元素
            var lis = document.querySelectorAll('li');
            var button = document.querySelector('button');

            // 2.添加事件
            lis.forEach(function(value, index) {
                value.index = index;
                value.addEventListener('mouseover', over);
                value.addEventListener('mouseout', out);
                value.addEventListener('click', cli)
            });
            button.addEventListener('click', butCil);

            // 3. 事件执行函数：
            // 3.1 移动到当前星星前面所有星星都发光显示
            function over() {
                for (var i = 0; i <= this.index; i++) {
                    lis[i].style.backgroundPositionY = '-28px';
                };
            };
            // 3.2 移动到当前星星前面所有星星都暗淡消失
            function out() {
                for (var i = 0; i <= this.index; i++) {
                    lis[i].style.backgroundPositionY = '0';
                };
            };
            //声明全局变量，接受被点击的星星的索引号。
            var Tindex;
            // 3.3 点击星星事件：
            function cli() {
                lis.forEach(function(value) {
                    // 移除所有移动跟离开的事件；
                    value.removeEventListener('mouseover', over);
                    value.removeEventListener('mouseout', out);
                    // 所有星星暗淡消失；
                    value.style.backgroundPositionY = '0';
                });
                // 当前星星前面所有星星都发光显示；
                for (var i = 0; i <= this.index; i++) {
                    lis[i].style.backgroundPositionY = '-28px';
                };
                // 按钮取消禁用；
                button.removeAttribute('disabled');
                // 当前星星索引号赋值给全局变量Tindex。
                Tindex = this.index;
            };
            // 3.4 点击提交事件：
            function butCil() {
                // 弹出最后点击的星星的标题内容
                alert(lis[Tindex].title);
            };
        });
    </script>
</head>

<body>
    <div id="div1">
        <ul>
            <li title="一星差评，呵呵呵，差的忍无可忍！！！"></li>
            <li title="二星差评"></li>
            <li title="三星差评"></li>
            <li title="四星中评"></li>
            <li title="五星中评"></li>
            <li title="六星中评"></li>
            <li title="七星好评"></li>
            <li title="八星好评"></li>
            <li title="九星好评"></li>
            <li title="十星满评！！！666,酷毙了！！！"></li>
            <span></span>
        </ul>

        <button disabled>提交</button>
    </div>
</body>

</html>